<template>
    <div class="avatar mr-20">
        <div class="avatar-name mr-5">{{ username }}</div>
        <div class="logo mr-5">
            <img :src="avatar" v-if="avatar" />
            <Avatar v-else icon="person" size="small" />
        </div>
        <Dropdown trigger="click" :transfer="true" @on-click="onClick">
            <Icon type="ios-arrow-down"></Icon>
            <DropdownMenu slot="list">
                <DropdownItem @click.native="$router.push('/index')">主页</DropdownItem>
                <DropdownItem name="1">
                    <span class="mr-5">消息中心</span>
                    <Badge :count="10" />
                </DropdownItem>
                <DropdownItem name="2">修改密码</DropdownItem>
                <DropdownItem name="3">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <!--退出登录 -->
        <BaseModal
            v-model="showLoginOut"
            title="退出登录"
            @on-ok="okData"
            :width="350"
            @on-cancel="showLoginOut = false"
            simple="true"
            >亲，确定退出当前系统？</BaseModal
        >
        <!--修改密码 -->
        <!--消息中心 -->
        <view-message v-model="showMessageModal"></view-message>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import { State, Mutation } from "vuex-class";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import { SET_TOKEN } from "@/store/types.ts";
import { Token } from "@/store/interface";
import ViewMessage from "@views/ViewMessage.vue";
@Component({
    components: {
        BaseModal,
        ViewMessage
    }
})
export default class AvatarIcon extends Tools {
    @State
    private username!: string;
    @State
    private avatar!: string;
    private showLoginOut: boolean = false;
    private showMessageModal: boolean = false;
    @Mutation
    private SET_TOKEN!: (param: {}) => Token;
    get getIncrement(): string {
        return "";
    }

    private onClick(val): void {
        //退出登录
        if (val === "3") {
            this.showLoginOut = true;
        } else if (val === "1") {
            //消息中心
            this.showMessageModal = true;
        }
    }
    private okData() {
        this.SET_TOKEN("");
        this.$router.replace("/login");
    }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable'

.avatar {
  display: flex
  align-items: center
  .avatar-name {
    font-size: 14px
    font-weight: 600
    color: $base-color
  }
  .logo img {
    width: 24px
    height: 24px
    border-radius: 50%
  }
}
</style>
